import React, {memo, useEffect, useState} from 'react';

import "./index.css";
import {useDispatch, useSelector} from "react-redux";
import {saveQuantificationCutOff} from "../../pages/main/analysis/components/quantification/store/actionCreators";

export default memo(function CutOff(props) {
  const dispatch = useDispatch();
  const {
    quantificationCutOff
  } = useSelector(
    state => ({
      quantificationCutOff: state.quantificationReducer.quantificationCutOff
    }));
  const {width, cutOffValue, cutOffFlag, forbidden, setCutoffSetting} = props;
  const [leftWidth, setLeftWidth] = useState(96);
  const [rightWidth, setRightWidth] = useState(96);
  // const [leftValue, setLeftValue] = useState(cutOffValue ? cutOffValue.left : 30);
  // const [rightValue, setRightValue] = useState(cutOffValue ? cutOffValue.right : 70);
  // const [leftInputValue, setLeftInputValue] = useState(cutOffValue ? cutOffValue.left : 30);
  // const [rightInputValue, setRightInputValue] = useState(cutOffValue ? cutOffValue.right : 70);
  const [leftValue, setLeftValue] = useState(quantificationCutOff.left);
  const [rightValue, setRightValue] = useState(quantificationCutOff.right);
  const [leftInputValue, setLeftInputValue] = useState(quantificationCutOff.left);
  const [rightInputValue, setRightInputValue] = useState(quantificationCutOff.right);

  function changeLeft(e) {
    setLeftInputValue(e.target.value);
  }

  function changeRight(e) {
    setRightInputValue(e.target.value);
  }

  useEffect(() => {
    if (1000 - Number(rightInputValue) + leftValue > 1000) {
      return;
    }
    setRightWidth(320 -  rightInputValue / 1000 * 320);
    setRightValue(Number(rightInputValue));
    if (setCutoffSetting) {
      // dispatch(saveQuantificationCutOff({left: Number(leftInputValue), right: Number(rightInputValue)}));
      setCutoffSetting({left: Number(leftInputValue) / 10, right: Number(rightInputValue) / 10});
    }
  }, [rightInputValue]);

  useEffect(() => {
    if (1000 - rightValue + Number(leftInputValue) > 1000) {
      return;
    }
    setLeftWidth(leftInputValue / 1000 * 320);
    setLeftValue(Number(leftInputValue));
    if (setCutoffSetting) {
      // dispatch(saveQuantificationCutOff({left: Number(leftInputValue), right: Number(rightInputValue)}));
      setCutoffSetting({left: Number(leftInputValue) / 10, right: Number(rightInputValue) / 10});
    }
  }, [leftInputValue]);

  return (
    <div className="cutOff" style={{width: width}}>
      <div style={{width: cutOffFlag ? cutOffValue.left * 6.4 : leftWidth}}>
        <div>{cutOffFlag ? Math.round(cutOffValue.left * 10) / 10 : Math.round(leftValue / 2) / 10}</div>
      </div>
      <div style={{width: cutOffFlag ? (50 - cutOffValue.right) * 6.4 : rightWidth}}>
        <div>{cutOffFlag ? Math.round(cutOffValue.right * 10) / 10 : Math.round(rightValue / 2) / 10}</div>
      </div>
      {
        forbidden
          ? null
          : <input type="range"
                   min={0}
                   max={1000}
                   value={leftValue}
                   onChange={e => changeLeft(e)}/>
      }
      {
        forbidden
          ? null
          : <input type="range"
                   min={0}
                   max={1000}
                   value={rightValue}
                   onChange={e => changeRight(e)}/>
      }
    </div>
  );
});
